<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="centre/manage/include :: header">
</head>

<!-- <link rel="stylesheet" type="text/css" href="/public/ace/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> -->

<style>
input[type=email], input[type=url], input[type=search], input[type=tel],
	input[type=color], input[type=text], input[type=password], input[type=datetime],
	input[type=datetime-local], input[type=date], input[type=month], input[type=time],
	input[type=week], input[type=number], textarea {
	border-radius: 0 !important;
	color: #858585;
	background-color: #FFF;
	border: 1px solid #D5D5D5;
	padding: 5px 4px 6px;
	font-size: 14px;
	font-family: inherit;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	-webkit-transition-duration: .1s;
	transition-duration: .1s;
}

select {
    padding: 3px 4px;
    height: 30px;
}
</style>
<body class="gray-bg">
	<div class="wrapper wrapper-content">
		<div class="row">
			<div class="col-sm-12">
			<div class="panel panel-info">
				<div class="panel-heading">按年、月、日统计商城交易额、交易量</div>
			    <div class="panel-body">
			        <div class="form-horizontal">
		             <div class="form-group">
		             	<label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">日期</label>
		             	<div class="col-xs-12 col-sm-2 col-md-1 col-lg-1">
                    		<select id="year" name="year" class="form-control">
                                <option value="2017">2017年</option>
                                <option value="2018" selected="selected">2018年</option>
                            </select>
                		</div>
		             	<div class="col-xs-12 col-sm-2 col-md-1 col-lg-1">
                    		<select id="month" name="month" class="form-control">
                        		<option value="">未选月份</option>
                                <option value="1">1月</option>
                                <option value="2">2月</option>
                                <option value="3">3月</option>
                                <option value="4">4月</option>
                                <option value="5">5月</option>
                                <option value="6">6月</option>
                                <option value="7">7月</option>
                                <option value="8">8月</option>
                                <option value="9">9月</option>
                                <option value="10">10月</option>
                                <option value="11">11月</option>
                                <option value="12">12月</option>
                            </select>
                		</div>
						<div class="col-xs-12 col-sm-2 col-md-1 col-lg-1">
		                    <select id="day" name="day" class="form-control">
		                        <option value=''>未选日期</option>
		                    </select>
		                </div>
		                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-7">
			                <span class='help-block'>不选择月份表示年统计，不选择日，则表示月统计</span>
		                </div>
		            </div>
		            <div class="form-group">
		                <label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label">商品名称</label>
		                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    		<select id="productId" class="form-control">
                    			<option value="">请选择商品名称</option>
                            </select>
                		</div>
		                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-5">
			                <span class='help-block'>请选择需要查询的商品名称</span>
		                </div>
		                <input type="hidden" id="centreId" name="centreId" th:value="${centreId}" th:if="${flag} == '1'">
		            </div>
		            
		            <div class="form-group">
		                <label class="col-xs-12 col-sm-2 col-md-2 col-lg-2 control-label"> 门店搜索</label>
                		<div class="col-xs-12 col-sm-8 col-md-4 col-lg-4">
                			<div class="input-group">
								<span class="input-group-addon">
									<i class="ace-icon fa fa-check"></i>
								</span>
								<input type="text" id="tzName" name="tzName" class="form-control" 
										value="" placeholder="输入需查询的门店姓名">
								<span class="input-group-btn">
									<button type="button" class="btn btn-purple" onclick="reLoad()">
										<span class="fa fa-search icon-on-right"></span>
										搜索
									</button>
								</span>
							</div>
		                </div>
		            </div>
			        </div>
			    </div>
			</div>
			
			<div class="panel panel-default">
    			<div class="panel-heading">
    				<span class="icon-desktop"></span>数据统计 
					[<span>2018年</span>
			                           最高交易量：<span style="color:red; ">180</span>
			                           总交易量：<span style="color:red; ">230</span>
			       	最高交易额：<span style="color:red; ">107.87</span>
			      	总交易额：<span style="color:red; ">122.3</span>]
    			</div>
    			
    			<div class="panel-body" style="padding: 0;">
    				<div id="goods-chart">
			
					</div>
    				<table id="singleSaleTable" data-mobile-responsive="true">
					</table>
			    </div>
			</div>
			</div>
			
		</div>
	</div>
	<div th:include="centre/manage/include::footer"></div>
	<script type="text/javascript" src="/public/ace/js/ace-extra.js"></script>
	<script type="text/javascript">
		function closeDow() {
			var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
			parent.layer.close(index);
		}

		var prefix = "/report/manage";
		$(document).ready(function () {
		    load();
		});
		function load() {
			$('#singleSaleTable').bootstrapTable({
				method : 'get', // 服务器数据的请求方式 get or post
				url : prefix + "/singleSale", // 服务器数据的加载地址
				showRefresh : true,
				// showToggle : true,
				iconSize : 'outline',
				// toolbar: '#exampleToolbar',
				striped : true, // 设置为true会有隔行变色效果
				dataType : "json", // 服务器返回的数据类型
				// pagination : true, // 设置为true会在底部显示分页条
				pageList : [ 10, 20, 50 ],
				// queryParamsType : "limit",
				// //设置为limit则会发送符合RESTFull格式的参数
				singleSelect : false, // 设置为true将禁止多选
				// contentType : "application/x-www-form-urlencoded",
				// //发送到服务器的数据编码类型
				pageSize : 10, // 如果设置了分页，每页数据条数
				pageNumber : 1, // 如果设置了分布，首页页码
				// search : true, // 是否显示搜索框
				showColumns : true, // 是否显示内容下拉框（选择显示的列）
				sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
				// "server"
				queryParams : function(params) {
					return {
						limit : 1,
						offset : 1 ,
						year: $.trim($("#year").val()),
                        month: $.trim($("#month").val()),
                        day: $.trim($("#day").val()),
                        productId:$.trim($("#productId").val()),
                        tzName:$.trim($("#tzName").val()),
                        centreId : $.trim($("#centreId").val())
					};
				},
				columns: [{
                    title: '月份',
                    field: 'gtime'
                },{
                    title: '交易量',
                    field: 'sumTotal'
                },{
                    title: '所占比例',
                    field: 'totalRate',
                    formatter: function (value, row, index) {
                    	return '<div class="progress">' +
                    	         '<div class="progress-bar" role="progressbar" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                                    '<span><font color="#000000">' + value + '%</font></span>' + 
                                 '</div>' + 
                               '</div>';
                    }
                },{
                    title: '交易额',
                    field: 'sumPrice'
                },{
                    title: '所占比例',
                    field: 'priceRate',
                    formatter: function (value, row, index) {
                    	return '<div class="progress">' +
                    	         '<div class="progress-bar" role="progressbar" aria-valuenow="60"  aria-valuemin="0" aria-valuemax="100" style="width: ' + value + '%;">' +
                                    '<span><font color="#000000">' + value + '%</font></span>' + 
                                 '</div>' + 
                               '</div>';
                    }
                }]
			});
		}
		function reLoad() {
			$('#singleSaleTable').bootstrapTable('refresh');
		}
		
		$("#month").click(function() {
			var year=$("#year option:selected").val();
			var month=$("#month option:selected").val();
			var html='<option value="">选择日期</option>';
			if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
				for (var i=1;i<=31;i++) {
					html +="<option value='"+i+"'>"+i+"日</option>";
				}
				
			} else if (month==4||month==6||month==9||month==11) {
				for (var i=1;i<=30;i++) {
					html +="<option value='"+i+"'>"+i+"日</option>";
				}
			} else if (month==2){
				if((year%4==0&&year%100!=0)||(year%400==0)) {
					for (var i=1;i<=29;i++) {
						html +="<option value='"+i+"'>"+i+"日</option>";
					}
				} else {
					for (var i=1;i<=28;i++) {
						html +="<option value='"+i+"'>"+i+"日</option>";
					}
				}
			} 
			$("#day").html('');
			$("#day").append(html);
		})
		
		
	</script>
	
</body>
</html>
